<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        /*准备工作===========start*/

        /*这样保证布局的标注准确*/
        * {
            margin: 0;
            padding: 0;
        }

        /*浮动与清楚写成class，这样可以减少代码*/
        .leftfix {
            float: left;
        }

        .rightfix {
            float: right;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        /*准备工作===========end  */

        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }

        .logo {
            width: 200px;
        }

        .banner1 {
            width: 540px;
            margin: 0 10px;
        }

        .banner2 {
            width: 200px;
        }

        /*复用代码*/
        .logo, .banner1, .banner2 {
            height: 80px;
            background-color: #ccc;
            line-height: 80px;
        }

        .menu {
            height: 30px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 30px;
        }

        .footer {
            height: 60px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 60px;
        }
        .content{
            margin-top: 10px;
        }
        .item1,.item2{
            /*边框1px,所有宽高都要减2*/
            width: 368px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }

        .item3,.item4,.item5,.item6 {
            width: 178px;
            height: 198px;
            border: 1px solid black;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 198px;

        }


        .item7,.item8,.item9{
            width: 198px;
            height: 128px;
            border: 1px solid black;
            line-height: 128px;
        }
        .item8,.item9{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<img src="../../images/浮动布局效果图.png" width="400px"><img src="../../images/浮动布局效果图细节标注.png"
                                                              width="400px">
<br>
<br>
<br>
<hr>
<div class="container">
    <!--    头部-->
    <div class="header clearfix">
        <div class="logo leftfix">logo</div>
        <div class="banner1 leftfix">banner1</div>
        <div class="banner2 leftfix">banner2</div>
    </div>

    <!--    菜单-->
    <div class="menu">菜单</div>


    <!--    内容区-->
    <div class="content clearfix">
<!--        左侧-->
        <div class="left leftfix">
            <div class="top clearfix">
                <div class="item1 leftfix">栏目一</div>
                <div class="item2 leftfix">栏目二</div>
            </div>
            <div class="buttom clearfix">
                <div class="item3 leftfix">栏目三</div>
                <div class="item4 leftfix">栏目四</div>
                <div class="item5 leftfix">栏目五</div>
                <div class="item6 leftfix">栏目六</div>
            </div>
        </div>
<!--        右侧-->
        <div class="right leftfix">
            <div class="item7">栏目七</div>
            <div class="item8">栏目八</div>
            <div class="item9">栏目九</div>
        </div>
    </div>

    <!--    页脚-->
    <div class="footer">页脚</div>
</div>

</body>
</html>